<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <div th:replace="/fragments/header :: header-css"/>
</head>
<body class="bg-light">

<div th:replace="/fragments/header :: header"/>
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li th:if="${loginSys}" class="breadcrumb-item">
                <a th:href="@{'/votes/' + ${#authentication.getName()}}">我的投票</a>
            </li>
            <li th:if="!${loginSys}" class="breadcrumb-item">
                <a th:href="@{'/votes/' + ${username}}">我的投票</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page" th:text="${vote.title}">Library</li>
        </ol>
    </nav>
    <div class="error-container"></div>

    <div class="card border-dark mb-3 shadow-sm">
        <div class="card-header bg-light">详情
            <div style="float: right">
                <a class="export-url" th:href="@{'/voteStatistics/export/{voteId}'(voteId=${vote.id})}"></a>
                <button type="button" class="btn btn-secondary btn-sm export-btn">导出结果</button>
<!--                 <a th:href="@{'/voteStatistics/export/{voteId}'(voteId=${vote.id})}">-->
<!--                    <button type="button" class="btn btn-secondary btn-sm">导出结果</button>-->
<!--                </a>-->
            </div>
            <div style="float: right" class="mr-1" sec:authorize="isAuthenticated()" th:if="${username}">
                <a th:href="@{'/editVote/{id}'(id=${vote.id})}" th:if="${vote.getItems().size()==0}">
                    <button type="button" class="btn btn-outline-primary btn-sm" th:text="编辑">
                        编辑
                    </button>
                </a>
            </div>

            <div style="float: right" class="mr-1">
                <a th:href="@{'/vote/setstatus/{voteId}/3'(voteId=${vote.id})}">
                    <button type="button" class="btn btn-outline-danger btn-sm">结束投票</button>
                </a>
            </div>
        </div>
        <div class="card-body">
            <h5 class="card-title" th:text="${vote.title}">Title</h5>
            <hr class="my-4"/>
            <p class="card-text" th:text="${vote.body}">body</p>
        </div>
    </div>
    <div class="alert alert-danger" th:if="${showAlertMessage}" th:utext="${showAlertMessage}">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="card border-dark mb-3 shadow-sm" style="margin-top: 16px">

        <div class="card-header bg-light">
            投票轮
            <!--添加投票轮按钮-->
            <!--如果有权限-->
            <div th:if="${loginSys}">
                <div sec:authorize="isAuthenticated()" style="float: right" th:if="${vote.getStatus()!='3'}">
                <a th:href="@{'/voteVote/{voteId}/{itemId}'(voteId=${vote.id},itemId=0)}">
                    <button type="button" class="btn btn-primary btn-sm">
                        添加一轮投票
                    </button>
                </a>
                </div>
            </div>
            <div th:if="!${loginSys}">
                <div style="float: right" th:if="${vote.getStatus()!='3'}">
                    <a th:href="@{'/voteVote/{voteId}/{itemId}'(voteId=${vote.id},itemId=0)}">
                        <button type="button" class="btn btn-secondary btn-sm">
                            添加一轮投票
                        </button>
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body card-nopadding">
            <table class="do-table table table-hover" width='100%' border='0' cellspacing='0' cellpadding='0'
                   align='right'>
                <thead class="thead-light">
                <tr>
                    <!--                    <th scope="col">序号</th>-->
                    <th scope="col">轮数</th>
                    <th scope="col">创建时间</th>
                    <th scope="col">投票情况</th>
                    <th scope="col">状态</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="item : ${vote.items}">
                    <!--                    <th scope="row"></th>-->
                    <td><strong th:text="'第'+${item.turnNum}+'轮'">Title</strong></td>
                    <td th:text="${#dates.format(item.createDate, 'yyyy-MM-dd')}">--/--/--</td>
                    <td th:text="${item.memberNum}+'/'+${item.memberSize}">-/-</td>
                    <td>
                        <span class="badge badge-primary" th:if="${item.status} == '1'">新建</span>
                        <span class="badge badge-success" th:if="${item.status} == '2'">已发起</span>
                        <span class="badge badge-secondary" th:if="${item.status} == '3'">已结束</span>
                    </td>
                    <td>
                        <a th:if="${item.status == '1'}"
                           th:href="@{'/voteVote/{voteid}/{itemid}'(voteid=${vote.id}, itemid=${item.id})}">
                            <button type="button" class="btn btn-outline-primary btn-sm d-inline">编辑</button>
                        </a>
                        <a th:if="${item.status == '1'}"
                           th:href="@{'/voteItemsView/{id}'(id=${item.id})}">
                            <button type="button" class="btn btn-outline-info btn-sm d-inline">投票项</button>
                        </a>
                        <a th:if="${item.status == '1'}"
                           th:href="@{'/setItemStatus/{id}/{status}'(id=${item.id},status='2')}">
                            <button type="button" class="btn btn-outline-warning btn-sm d-inline">发起</button>
                        </a>
                        <button th:if="${item.status == '2'}" type="button"
                                class="btn btn-outline-secondary btn-sm d-inline"
                                th:onclick="|showModel(${item.id})|">邀请码
                        </button>
                        <a th:if="${item.status != '1'}"
                           th:href="@{'/statistics/{id}'(id=${item.id})}">
                            <button type="button" class="btn btn-outline-success btn-sm d-inline">统计</button>
                        </a>
                        <button type="button" class="btn btn-outline-dark btn-sm d-inline" th:if="${item.status == '2'}"
                                th:onclick="|showModel('modal'+ ${item.id})|">结束
                        </button>
                        <a th:if="${item.status == '1'}"
                           th:href="@{'/delete/{id}'(id=${item.id})}">
                            <button type="button" class="btn btn-outline-danger btn-sm d-inline">删除</button>
                        </a>
                    </td>
                    <!--邀请码-->
                    <div class="modal fade code-model" th:id="${item.id}" tabindex="-1" role="dialog"
                         aria-labelledby="codeTitle"
                         aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="codeTitle" th:text="'第'+${item.turnNum}+'轮'"></h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="form-control" readonly="readonly" id="code"
                                           th:value="${address}+${item.id}+'/'+${item.code}"/>
                                    <!--                                    <span th:text="${address}"></span><span th:text="${item.id}"></span><span>/</span><span th:text="${item.code}"></span>-->
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    <!--                                    <button type="button" class="btn btn-primary copyCode" id="copyCode"-->
                                    <!--                                            data-clipboard-target="#code">复制-->
                                    <!--                                    </button>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal" tabindex="-1" role="dialog" id="confirmModal" th:id="'modal'+${item.id}">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">确认框</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <h6 class="modal-title" th:text="'确认要结束第'+${item.turnNum}+'轮投票吗？'"></h6>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" th:onclick="|overVote(${item.id})|">
                                        确认
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div th:replace="/fragments/footer :: footer"/>
<script th:src="@{/webjars/clipboard.js/2.0.4/clipboard.min.js}"></script>
<script>
    function showModel(id) {
        $('#' + id).modal('show');
    }
    function overVote(id) {
        window.location.href = '/setItemStatus/' + id + '/' + '3'
    }
    var clipboard = new ClipboardJS('#copyCode');
    clipboard.on('success', function (e) {
        $('#copyCode').text('复制成功');
    });

    clipboard.on('error', function (e) {
        $('#copyCode').text('复制失败');
    });
    $('.code-model').on('hidden.bs.modal', function () {
        $('#copyCode').text('复制');
        $(this).removeData("bs.modal");
    })
    $('.export-btn').on('click', function () {
        $.ajax({
            url: $('.export-url').attr('href'),
            success: function (res) {
                /**
                 * file url: src/main/java/com/hollykunge/controller/VoteController
                 *
                 * public ObjectRestResponse exportVoteStatic
                 *
                 * url直接跳转后，不存在数据，界面返回为json，用ajax请求处理json，成功后返回内容为 .xlsx
                 *
                 * */
                if(res.status) {
                    if(res.status === 500) {
                        // 将错误信息添加到容器
                        var template = [
                            '<div class="alert alert-danger error-alert-danger">',
                            res.message,
                            '<button type="button" class="close" data-dismiss="alert" aria-label="Close">',
                            '<span aria-hidden="true">&times;</span>',
                            '</button>',
                            '</div>'
                        ].join('')
                        $('.error-container').append(template)
                    }
                    return
                }
                window.location.href = $('.export-url').attr('href')
            }
        })
    })
    
</script>
</body>
</html>
